<template>
  <div class="app-container">
    <div class="container-module">
      <div class="title-module">活动列表</div>
      <div class="search-module">
        <el-form
          :inline="true"
          class="search-form"
          size="small"
          ref="searchForm"
          :model="searchForm"
        >
          <div class="flex">
            <div style="flex: 1">
              <el-form-item
                label="活动名称"
                class="search-form-item"
                prop="activity_name"
              >
                <el-input
                  clearable
                  placeholder="请输入活动名称"
                  v-model="searchForm.activity_name"
                >
                </el-input>
              </el-form-item>
              <el-form-item
                label="生效区域"
                class="search-form-item"
                prop="region"
              >
                <el-cascader
                  filterable
                  v-model="searchForm.user_area"
                  style="width: 100%"
                  :options="regionList"
                  collapse-tags
                  :props="{
                    expandTrigger: 'hover',
                    multiple: true,
                    value: 'id',
                    label: 'name',
                    children: 'children',
                    checkStrictly: false,
                    emitPath: false,
                  }"
                  clearable
                ></el-cascader>
              </el-form-item>
              <el-form-item
                label="用户群组"
                class="search-form-item"
                prop="group"
              >
                <el-select
                  clearable
                  v-model="searchForm.user_group"
                  multiple
                  collapse-tags
                  placeholder="请选择用户群组"
                >
                  <el-option
                    v-for="item in groupingList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="活动状态"
                class="search-form-item"
                prop="status"
              >
                <el-select
                  clearable
                  v-model="searchForm.status"
                  placeholder="请选择状态"
                >
                  <el-option
                    v-for="item in status"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="button-box">
              <el-button
                @click="getListWay"
                type="primary"
                icon="el-icon-search"
                class="inquire-box marginBottom-10"
                >查询</el-button
              >
              <el-button
                icon="el-icon-refresh-left"
                class="reset-box"
                @click="resetForm('searchForm')"
                >重置</el-button
              >
              <el-button
                v-if="!searchDisplay"
                type="warning"
                icon="el-icon-caret-bottom"
                @click="searchDisplay = true"
                >展开</el-button
              >
              <el-button
                v-else
                type="warning"
                icon="el-icon-caret-top"
                @click="searchDisplay = false"
                >收起</el-button
              >
            </div>
          </div>
          <div v-if="searchDisplay">
            <el-form-item label="创建时间" class="search-form-item" prop="time">
              <el-date-picker
                clearable
                v-model="searchForm.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <el-divider></el-divider>

      <el-row calss="flex-between">
        <!-- <user_shipment></user_shipment> -->
        <!-- <merchant_shipment></merchant_shipment> -->
      </el-row>
      <!-- <div class="table-module">
        <div class="table-top flex-between">
          <div class="flex button-box">
            <el-button
              @click="addDetail('新建活动')"
              type="primary"
              icon="el-icon-plus"
              class="inquire-box marginRight-10"
              >新建</el-button
            >
            <el-button class="reset-box">活动分析</el-button>
          </div>
          <div class="flex button-box">
            <el-button
              class="reset-box marginRight-10"
              icon="el-icon-download"
              style="height: 30px"
              >下载</el-button
            >
            <el-dropdown trigger="click" :hide-on-click="false">
              <span class="el-dropdown-link">
                <el-button
                  icon="el-icon-s-operation"
                  style="height: 30px"
                ></el-button>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                  <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                    tableTheadOptions[fruit].label
                  }}</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <el-row>
          <el-col>
            <el-table
              v-loading="loading"
              highlight-current-row
              :data="dataList"
              :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }"
              style="width: 100%"
            >
              <el-table-column
                v-for="fruit in tableThead"
                :key="fruit"
                :label="tableTheadOptions[fruit].label"
                min-width="80"
                :width="
                  tableTheadOptions[fruit].width
                    ? tableTheadOptions[fruit].width
                    : '80'
                "
                align="center"
              >
                <template slot-scope="scope">
                  <div v-if="fruit == 'status'">
                    <el-tag v-if="scope.row.status == -1" type="danger"
                      >已过期</el-tag
                    >
                    <el-tag v-if="scope.row.status == 1" type="success"
                      >已开启</el-tag
                    >
                    <el-tag v-if="scope.row.status == 3" type="success"
                      >进行中</el-tag
                    >
                    <el-tag v-if="scope.row.status == 2" type="warning"
                      >已关闭</el-tag
                    >
                  </div>

                  <div v-else>
                    {{ scope.row[fruit] }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                prop="address"
                label="操作"
                align="center"
                width="200px"
              >
                <template slot-scope="scope">
                  <el-button
                    style="margin: 5px"
                    v-if="scope.row.status == 1 || scope.row.status == 3"
                    type="warning"
                    size="mini"
                    @click="saveStatus(scope.row, 2)"
                  >
                    关闭活动
                  </el-button>
                  <el-button
                    style="margin: 5px"
                    v-if="scope.row.status == 2"
                    type="success"
                    size="mini"
                    @click="saveStatus(scope.row, 1)"
                  >
                    开启活动
                  </el-button>
                  <el-button
                    style="margin: 5px"
                    type="primary"
                    size="mini"
                    @click="viewDetail(scope.row)"
                  >
                    查看
                  </el-button>
                  <el-popconfirm
                    title="这是一段内容确定删除吗？"
                    @confirm="deleteCoupon(scope.row)"
                  >
                    <el-button
                      style="margin: 5px"
                      type="danger"
                      size="mini"
                      slot="reference"
                    >
                      删除
                    </el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col style="text-align: right">
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="searchForm.page"
              :limit.sync="searchForm.count"
              @pagination="getListWay"
            />
          </el-col>
        </el-row>
      </div> -->
    </div>
  </div>
</template>
  <script>
import {
  getAwardList,
  delAward,
  SaveAwardStatus,
  getAwardTaskList,
  SaveAwardTask,
  delAwardTask,
} from "@/api/activity/index";
import {
  getgroupList,
  getTagCategoryAll,
  getgradeList,
  getRegionList,
} from "@/api/user/index";
// import { merchant_shipment } from "../components/merchantshipment";
const tableTheadOption = {
  id: {
    label: "活动编号",
    field: "id",
  },
  award_name: {
    label: "活动名称",
    field: "award_name",
    width: "150",
  },
  region: {
    label: "生效地区",
    field: "description",
    width: "240",
  },
  start_time: {
    label: "开始时间",
    field: "start_time",
    width: "130",
  },
  end_time: {
    label: "结束时间",
    field: "end_time",
    width: "130",
  },

  user_lottery_num: {
    label: "抽奖总次数",
    field: "user_lottery_num",
    width: "110",
  },
  user_days_lottery_num: {
    label: "日抽奖总次数",
    field: "user_days_lottery_num",
    width: "120",
  },
  canPeople: {
    label: "参与人数",
    field: "canPeople",
    width: "120",
  },
  group_name: {
    label: "用户群组",
    field: "group_name",
    width: "200",
  },
  created_at: {
    label: "创建时间",
    field: "created_at",
    width: "140",
  },
  status: {
    label: "状态",
    field: "status",
  },
};
const allTableThead = [
  "id",
  "award_name",
  "region",
  "start_time",
  "end_time",
  "status",
  "user_lottery_num",
  "user_days_lottery_num",
  "canPeople",
  "group_name",
  "created_at",
];
const defaultTableThead = [
  "id",
  "award_name",
  "region",
  "start_time",
  "end_time",
  "status",
  "user_lottery_num",
  "user_days_lottery_num",
  "canPeople",
  "group_name",
  "created_at",
];
export default {
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1;
    },
  },
  components: {
    // user_shipment: () => import("../components/usershipment"),
    // merchant_shipment: () => import("../components/merchantshipment"),
  },
  data() {
    return {
      searchDisplay: false,
      detailTitle: "", //抽屉标题
      // 动态显示表头默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      loading: true, // 列表页面加载
      groupingList: [],
      TagCategoryAll: [],
      gradeList: [],
      regionList: [],
      status: [
        { name: "已过期", id: -1 },
        { name: "已开启", id: 1 },
        { name: "进行中", id: 3 },
        { name: "已关闭", id: 2 },
      ],
      searchForm: {
        award_name: "", // 抽奖活动名称
        user_area: [], //生效区域
        user_group: [], //用户群组
        status: "", // 状态状态：-1过期 1开启 2进行中 3关闭
        time: [],
        page: 1,
        count: 10,
      },
      dataList: [],
      total: 0,
      ifShowDetail: false, //是否打开详情抽屉
    };
  },
  created() {
    const p1 = new Promise((resolve, reject) => {
      getgroupList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.groupingList = res.data.list;
        resolve();
      });
    });
    const p2 = new Promise((resolve, reject) => {
      getTagCategoryAll().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.TagCategoryAll = res.data;
        resolve();
      });
    });
    const p3 = new Promise((resolve, reject) => {
      getgradeList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.gradeList = res.data.list;
        resolve();
      });
    });
    const p4 = new Promise((resolve, reject) => {
      getRegionList({ level: 2 }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.regionList = res.data;
        resolve();
      });
    });
    Promise.all([p1, p2, p3, p4])
      .then(() => {
        this.getListWay();
      })
      .catch(() => {
        this.loading = false;
      });
  },
  methods: {
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getListWay();
    },
    viewDetail(row) {
      this.detailTitle = "活动信息";
      this.ifShowDetail = true;
      this.$nextTick(() => {
        this.$refs.detail.getAwardInfoWay(row);
      });
    },
    //打开抽屉
    addDetail(title) {
      this.detailTitle = title;
      this.ifShowDetail = true;
    },
    //关闭抽屉
    closedetail() {
      this.ifShowDetail = false;
      this.getListWay();
    },
    getListWay() {
      this.loading = true;
      let searchObj = {
        award_name: this.searchForm.award_name,
        status: this.searchForm.status,
        page: this.searchForm.page,
        count: this.searchForm.count,
        user_area: this.searchForm.user_area.toString(),
        user_group: this.searchForm.user_group.toString(),
        start_time: this.searchForm[0] ? this.searchForm[0] : "",
        end_time: this.searchForm[1] ? this.searchForm[1] : "",
      };
      getAwardList(searchObj).then((res) => {
        this.loading = false;
        if (res.code !== 200 || res.status !== 1) {
          this.loading = false;
          return this.$messages.error(res.msg);
        }
        this.dataList = res.data.list;
        this.total = res.data.total;
      });
    },
    resetting() {
      this.searchForm = {
        award_name: "", // 抽奖活动名称
        status: "", // 状态状态：-1过期 1开启 2进行中 3关闭
        page: 1,
        count: 10,
      };
      this.getListWay();
    },
    saveWay(url) {
      this.$router.push(url);
    },
    editCoupon(row) {
      this.$router.push("/activity/raffle/save?id=" + row.id);
    },
    deleteCoupon(row) {
      this.loading = true;
      delAward({ id: row.id })
        .then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.loading = false;
            return this.$messages.error(res.msg);
          }
          this.$messages.success("删除成功");
          this.getListWay();
        })
        .catch((err) => {
          this.loading = false;
          this.$messages.error(err.msg);
        });
    },
    // 修改状态
    saveStatus(row, num) {
      var obj = {
        id: row.id,
        status: num,
      };
      this.loading = true;
      SaveAwardStatus(obj)
        .then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.loading = false;
            return this.$messages.error(res.msg);
          }
          this.$messages.success("操作成功");
          this.getListWay();
        })
        .catch((err) => {
          this.$messages.error(err.msg);
          this.loading = false;
        });
    },
  },
};
</script>
  <style lang="scss">
.el-divider--horizontal {
  margin: 10px 0 !important;
}
.search-form-item {
  padding-bottom: 10px;
  padding-right: 20px;
  .el-form-item__label {
    font-size: 12px;
    font-weight: 500;
    // width:96px;
  }
  .el-input {
    width: 180px;
  }
}
</style>
  <style lang="scss" scoped>
.app-container {
  background-color: #fff !important;
}
.marginBottom-10 {
  margin-bottom: 10px;
}
.marginRight-10 {
  margin-right: 10px;
}
.flex {
  display: flex;
}
.flex-between {
  display: flex;
  justify-content: space-between;
}
.button-box {
  font-size: 14px;
  text-align: right;
  font-size: 12px;
  .inquire-box {
    background: #1890ff;
    color: #ffffff;
  }
  .reset-box {
    background: #eeeeee;
  }
}
.app-container {
  background: #f3f5f7;
  .container-module {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    .title-module {
      font-size: 18px;
    }
    .search-module {
      padding-top: 20px;
      display: block;
    }
    .table-module {
      .table-top {
        margin-bottom: 20px;
      }
      .table-num {
        margin-left: 5px;
        background: #f0f0f0;
        width: 35px;
        border-radius: 5px;
      }
    }
  }
}
</style>